<template>
  <div class="add-content">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-select v-model="objkey" @change="handleSeleChange" placeholder="请选择查找范围的Key">
              <el-option v-for="(item ,i) in leftObjKeys" :key="i" :label="item" :value="item"></el-option>
            </el-select>
          </div>
          <div class="text item">
            <el-input
              @change="handleLeftJson"
              type="textarea"
              :rows="20"
              placeholder="请输入内容"
              v-model="leftJson"
            ></el-input>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-button @click="handleDiff" class="diffBtn" type="success">DIFF</el-button>
      </el-col>
      <el-col :span="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-select
              v-model="objRightKey"
              @change="handleSeleChangeRight"
              placeholder="请选择对比范围的Key"
            >
              <el-option v-for="(item ,i) in rightObjKeys" :key="i" :label="item" :value="item"></el-option>
            </el-select>
          </div>
          <div class="text item">
            <el-input
              @change="handleRightJson"
              type="textarea"
              :rows="20"
              placeholder="请输入内容"
              v-model="rightJson"
            ></el-input>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  parseJson,
  parseRightJson,
  getParkeys,
  getRightParKeys,
  initRight,
  init
} from '@/utils/myjs'
export default {
  data () {
    return {
      leftJson: '',
      rightJson: '',
      changeLeftJson: Object,
      changeRightJson: Object,
      leftKeys: [], // 左侧所有键名去重
      rightKeys: [], // 右侧所有键名去重
      leftValues: [], // 左侧所有value去重
      rightValues: [], // 右侧所有value去重
      leftObjKeys: [], // 第一级键名
      rightObjKeys: [], // 右侧第一级键名
      objkey: '', // 筛选key
      objRightKey: '' // 筛选keyRight
    }
  },
  methods: {
    // 获取左侧json 的value
    handleLeftJson () {
      this.leftObjKeys = getParkeys(JSON.parse(this.leftJson))
      this.leftObjKeys.unshift('all')
      // console.log(, "getParkeys");
    },
    //   获取右侧json 的value
    handleRightJson () {
      this.rightObjKeys = getRightParKeys(JSON.parse(this.rightJson))
      this.rightObjKeys.unshift('all')
    },
    handleSeleChange () {
      init()
      parseJson(JSON.parse(this.leftJson), this.objkey)
      this.leftKeys = sessionStorage.getItem('allKeys')
      this.leftValues = sessionStorage.getItem('allValues')
      console.log(this.leftKeys, '===================', this.leftValues)
    },
    handleSeleChangeRight () {
      initRight()
      parseRightJson(JSON.parse(this.rightJson), this.objRightKey)
      this.rightKeys = sessionStorage.getItem('allRightKeys')
      this.rightValues = sessionStorage.getItem('allRightValues')
    },
    // 对比计算返回结果 进行弹窗设计 分别对应左右两个区域
    handleDiff () {
      // 左-》 右
    }
  }
}
</script>
<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.diffBtn {
  display: flex;
  margin: 0 auto;
  justify-content: center;
}
/deep/.el-textarea__inner {
  resize: none;
  border: 1px solid #00f;
}
</style>